<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="李军锋">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
       .nav{
           width: 400px;
           height: 60px;
           /* margin: 0 auto; */
           background-color: black;
           display: flex;
       }
       section{
           width: 100px;
           line-height: 60px;
           color: white;
           border: 1px solid black;
           border-bottom: 1px solid gray;
       }
       ul{
           width: 357px;
           border: 1px solid black;
           border-top: none;
           margin-top: -1px;
           background-color: white;
            position: absolute; 
           display: none;
           z-index: -1px;
       }
       ul>li{
           list-style: none;
           text-align: center;
           color: black;
       }
    </style>
</head>
<body>
    <div class="nav">
        <section class="nav-one">选项1
            
            <ul class="one">
                <li>内容1</li>
                <li>内容2</li>
                <li>内容3</li>
                <li>内容4</li>
            </ul>
        </section>
        <section  class="nav-two">选项2
            
            <ul class="two">
                <li>内容1</li>
                <li>内容2</li>
                <li>内容3</li>
            </ul>
        </section>
        <section class="nav-three">选项3
            
             <ul class="three">
                <li>内容1</li>
                
            </ul>       
        </section>
    </div>

    <script src="jquery.js"></script>
</body>
</html>
<script>
    var s1 = $('.nav-one');
    var s2 = $('.nav-two');
    var s3 = $('.nav-three');
    var ul1 = $('.one');
    var ul2 = $('.two');
    var ul3 = $('.three');
    s1.hover(function(){
        s1.css('background-color','gray');
        ul1.css('display','block').css('left',0);
    },function(){
        s1.css('background-color','black');
        ul1.css('display','none');
    });
    s2.hover(function(){
        s2.css('background-color','gray');
        ul2.css('display','block').css('left',0);
    },function(){
        s2.css('background-color','black');
        ul2.css('display','none');
    });
    s3.hover(function(){
        s3.css('background-color','gray');
        ul3.css('display','block').css('left',0);
    },function(){
        s3.css('background-color','black');
        ul3.css('display','none');
    });
</script>